<template>
  <div>
    <el-form @submit.native.prevent ref="formFileds" :model="formFileds" label-width="auto">
      <el-row :gutter="24">
        <el-col :span="7">
          <el-form-item label="年份" prop="date">
            <div style="display: flex">
              <el-input type="text" v-model="formFileds.date" placeholder="请输入   例：2022 / 202201"
                @keyup.enter.native="search()"></el-input>
              <el-button type="primary" @click="search()">查询</el-button>
            </div>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="7">
                    <el-form-item label="案件类型" prop="ajlx">
                        <div style="display:flex">
                            <el-select v-model="formFileds.ajlx" clearable>
                                <el-option label="个人" value="个人"></el-option>
                                <el-option label="企业机构" value="企业机构"></el-option>
                                <el-option label="司法机构" value="司法机构"></el-option>
                            </el-select>
                            <el-button type="primary" @click="search()">查询</el-button>
                        </div>
                    </el-form-item>
                </el-col> -->
        <!-- :action="/api/ysgl/import?qyid=" + qyid -->
        <el-col :span="17">
          <el-form-item label-width="0">
            <el-button type="primary" @click="budgetview(null)">添加</el-button>
            <el-button type="primary" @click="download">导出</el-button>
            <div style="display: inline-block;margin-left: 10px;" >
              <el-upload class="upload-demo" list-type="text" action="#" :http-request="httpRequest" ref="upload"
                :file-list="fileList" :show-file-list="true" :auto-upload="false" :on-success="handleSuccess"
                accept=".xls,.xlsx" :limit="1">
                <el-button type="primary" slot="trigger">选取文件</el-button>
              </el-upload>
            </div>
            <el-button type="success" @click="submitUpload" style="margin-left: 10px;">导入</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }" :span-method="arraySpanMethod" :summary-method="getSummaries" show-summary>
      <el-table-column :label="title" style="font-size: 18px">
        <el-table-column prop="date" label="月份"></el-table-column>
        <el-table-column prop="type" label="案件类型"></el-table-column>
        <el-table-column prop="yajsl" label="案件数量"> </el-table-column>
        <el-table-column prop="yajsr" label="实收金额"> </el-table-column>
        <el-table-column prop="yysje" label="应收金额"> </el-table-column>
        <el-table-column prop="ypjajdj" label="平均案件单价"> </el-table-column>
        <el-table-column prop="yajcb" label="案件成本"> </el-table-column>
        <el-table-column prop="yajml" label="案件毛利"> </el-table-column>
        <el-table-column prop="yajmll" label="案件毛利率"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="budgetview(scope.row)">编辑</el-button>
            <el-button type="text" style="color: red" @click="rowDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <BudgetShow ref="budgetShow" v-if="budgetShow" :budgetShow="budgetShow" :record="budgetForm" :year="title"
      :action="addoredit" @dialogClose="dialogClose" @gettable="gettable" :tableData="tableData"></BudgetShow>
  </div>
</template>
 
<script>
import BudgetShow from "./budgetShow.vue";
import {
  getAll,
  getList,
  del,
  sort,
  daoru,
} from "@/api/financialManagement/budget";
export default {
  name: "BudgetManagement",
  components: {
    BudgetShow,
  },
  data () {
    return {
      qyid: Number(localStorage.getItem("companyId")),
      formFileds: {
        date: "",
        ajlx: "",
      },
      title: "",
      dateOptions: [],
      tableData: [],
      arrmonth: [],
      monthOptions: [],
      budgetShow: false,
      budgetForm: {},
      spanArr: [],
      addoredit: "",
      fileList: [],
    };
  },
  setup () { },
  methods: {
    httpRequest (params) {
      //  console.log("上传的文件++" + JSON.stringify(params.file));
      let formData = new FormData();
      formData.append("file", params.file);
      formData.append("qyid", qyid);
      //  console.log("上传结果：", JSON.stringify(formData));
      daoru(formData).then((res) => {
        this.$message.success("导入成功！");
      });
    },
    submitUpload () {
      this.$confirm("导入已存在年份的文件将覆盖原来的文件", "导入excel文件", {
        comfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs.upload.submit();
          return true;
        })
        .catch(() => {
          return false;
        });
    },
    mergeTable () {
      var index;
      this.spanArr = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (i == 0) {
          this.spanArr.push(1);
          index = 0;
        } else {
          if (this.tableData[i].date == this.tableData[i - 1].date) {
            this.spanArr[index] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            index = i;
          }
        }
      }
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return [_row, _col];
      }
    },
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (index == 5) {
          if (sums[3] != 0 && sums[2] != 0) {
            sums[index] = (sums[3] / sums[2]).toFixed(2);
          } else {
            sums[index] = "";
          }
        } else if (index == 8) {
          if (sums[7] != 0 && sums[3] != 0) {
            sums[index] = ((sums[7] / sums[3]) * 100).toFixed(2) + "%";
          } else {
            sums[index] = "";
          }
        } else {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " ";
          } else {
            sums[index] = "";
          }
        }
      });

      return sums;
    },
    download () {
      window.location.href =
        "api/ysgl/export?input=" +
        this.title.substring(0, 4) +
        "&qyid=" +
        Number(localStorage.getItem("companyId"));
    },
    handleSuccess (file, fileList) {
      fileList = [];
      this.fileList = [];
    },
    upexcel () {
      this.$confirm("导入已存在年份的文件将覆盖原来的文件", "导入excel文件", {
        comfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs["upload"].$refs["upload-inner"].handleClick();
          return true;
        })
        .catch(() => {
          return false;
        });
    },
    search () {
      if (this.formFileds.date.length >= 4) {
        if (this.formFileds.date) {
          var par;
          par = {
            input: this.formFileds.date + "",
            qyid: Number(localStorage.getItem("companyId")),
          };
          getList(par).then((res) => {
            this.title = this.formFileds.date + "预算管理";
            this.tableData = res.data;
          });
        } else {
          let nowDate = new Date();
          let year = nowDate.getFullYear();
          this.title = nowDate.getFullYear() + "预算管理";
          var par;
          par = {
            input: year + "",
            qyid: Number(localStorage.getItem("companyId")),
          };
          getList(par).then((res) => {
            this.tableData = res.data;
          });
        }
      } else {
        return;
      }
    },
    gettable () {
      var year;
      if (this.title) {
        year = this.title.substring(0, 4);
        var par;
        par = {
          input: year + "",
          qyid: Number(localStorage.getItem("companyId")),
        };
        getList(par).then((res) => {
          this.tableData = res.data;
          this.mergeTable();
        });
      } else {
        let nowDate = new Date();
        year = nowDate.getFullYear();
        this.title = year + "预算管理";
        var par;
        par = {
          input: year + "",
          qyid: Number(localStorage.getItem("companyId")),
        };
        getList(par).then((res) => {
          this.tableData = res.data;
          this.mergeTable();
        });
      }
    },

    dialogClose () {
      this.budgetShow = false;
    },
    budgetview (row) {
      this.budgetShow = true;
      if (row == null) {
        this.addoredit = "add";
      } else {
        this.budgetForm = row;
        this.addoredit = "edit";
      }
    },
    rowDel (id) {
      this.$confirm("确定要删除当前行吗？", "删除", {
        comfirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        del("id=" + id).then((res) => {
          this.gettable();
        });
      });
    },
  },
  mounted () {
    /* console.log("当前用户的企业id是：" + localStorage.getItem("companyId")); */
    this.gettable();
  },
};
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}

.el-form-item {
  padding: 0 10px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.main {
  text-align: center;
  background-color: #fff;
  border-radius: 20px;
  width: 300px;
  height: 350px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* /deep/ input[type='number'] {
    -moz-appearance: textfield;
} */

.upload-demo {
  display: flex;
}

/deep/ .el-table__footer-wrapper tbody td.el-table__cell {
  text-align: center;
}
</style>
